<template>
  <transition name="bounce" mode="out-in">
    <div class="mh-container">
      <mh-header headName="文章详情"> </mh-header>
      <section class="mui-content">
        <article>
          <h4 v-text="articleTitle">-文章标题-</h4>
          <p class="author">作者：{{author}}</p>
          <div class="artical-img">
            <img :src="imgSrc" :alt="articleTitle">
          </div>
          <p v-text="content">-</p>
        </article>
      </section>
      <div class="user-operate flex-bt">
        <a href="javascript:" class="flex">
          <img src="../../assets/images/ico/ic_t_gift.png" alt="送礼物">
          <span>送礼物</span>
        </a>
        <a href="javascript:" class="flex">
          <img src="../../assets/images/ico/ic_t_money.png" alt="打赏">
          <span>打赏</span>
        </a>
        <a href="javascript:" class="flex">
          <img src="../../assets/images/ico/ic_t_share.png" alt="转发">
          <span>转发</span>
        </a>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "talents-detail",
    data () {
      return {
        articleTitle: '人生总是需要一场说走就走的旅行',
        author: '球球',
        imgSrc: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2307001494,1485507584&fm=11&gp=0.jpg',
        content: '说走就走 云南之旅 人生需要一次说走就走的旅行，不为跋涉千里的向往，只为漫无目的的闲逛，不为人山人海的名胜，只为怡然自乐的街景'
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .artical-img {
    img {width: 100%}
  }
  article {
    padding: 1.5rem;
    background: #fff;
    h4 {
      @include sc(1.7rem, #333);
    }
    p {
      @include sc(1.5rem, #666);
      line-height: 2rem;
    }
    .author {
      @include sc(1.2rem, #999);
      margin: 1.3rem 0;
    }
  }
  .user-operate {
    position: fixed;
    margin-top: 1.5rem;
    padding: 1.5rem;
    align-items: center;
    border-top: 1px solid #eee;
    left: 0;
    bottom: 0;
    right: 0;
    span {
      font-size: 1.2rem;
      color: #999999;
    }
    img {
      width: 1.25rem;
      margin-right: 1rem;
    }
  }
</style>
